import React from "react";
import MessageList from "./ui/shared/MessageList";
import { AIConfigModal } from "./ui/shared/ai_config/AIConfigModal";
import Header from "./ui/shared/Header";
import HistoryDialog from "./ui/shared/History/HistoryModal";
import styles from "./App.module.css";
import { useTheme } from "./ui/store/useTheme";
import { ModelInfoModal } from "./ui/shared/ai_config/ModelInfoModal";
import { ModalList } from "./ui/shared/Modal/ModalList";
import { ChatForm } from "./ui/shared/components/form";

const App: React.FC = () => {
    const theme = useTheme((state) => state.theme);
    return (
        <div className={styles.container} data-theme={theme}>
            <Header />

            <main className={styles.main}>
                <MessageList />
                <ChatForm />
            </main>
            <AIConfigModal />
            <HistoryDialog />
            <ModelInfoModal />
            <ModalList />
        </div>
    );
};

export default App;